<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学成在线</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <!-- 头部模块 -->
    <div class="header">
        <div class="header-info wrapper">
            <!-- logo 制作技巧 -->
            <h1 class="logo"><a href="">学成在线</a></h1>
            <!-- 导航 -->
            <!-- 避免堆砌a标签导致网站搜索排名降级 -->
            <div class="header-links">
                <ul>
                    <li>
                        <a class="activeLink" href="">首页</a>
                    </li>
                    <li>
                        <a href="">课程</a>
                    </li>
                    <li>
                        <a href="">职业规划</a>
                    </li>
                </ul>

            </div>
            <!-- 搜索 -->
            <div class="search-userInfo">
                <div class="search">
                    <input placeholder="输入关键词" type="text">
                    <button></button>
                </div>
                <!-- 用户 -->
                <div class="userInfo">
                    <a href="#">
                        <img src="./uploads/icon.jpg" alt="">
                        <span>KoubeShio</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <!-- banner模块 -->
    <div class="banner">
        <div class="banner-info wrapper">
            <div class="course">
                <ul>
                    <li>
                        <a href="#">前端开发</a>
                    </li>
                    <li>
                        <a href="#">后端开发</a>
                    </li>
                    <li>
                        <a href="#">移动开发</a>
                    </li>
                    <li>
                        <a href="#">人工智能</a>
                    </li>
                    <li>
                        <a href="#">商业预测</a>
                    </li>
                    <li>
                        <a href="#">云计算&大数据</a>
                    </li>
                    <li>
                        <a href="#">运维&测试</a>
                    </li>
                    <li>
                        <a href="#">UI设计</a>
                    </li>
                    <li>
                        <a href="#">产品</a>
                    </li>
                </ul>
            </div>
            <div class="course-timeTable">
                <h3>我的课程表</h3>
                <div class="course-list">
                    <dl>
                        <a href="#">
                            <dt>数据可视化课程</dt>
                            <dd>
                                <span class="studying">正在学习</span> -
                                <strong class="studying-schedule">echarts使用步骤</strong>
                            </dd>
                        </a>
                    </dl>
                    <dl>
                        <a href="#">
                            <dt>Vue3医疗项目课程</dt>
                            <dd>
                                <span class="studying">正在学习</span> -
                                <strong class="studying-schedule">认识组合式API</strong>
                            </dd>
                        </a>
                    </dl>
                    <dl>
                        <a href="#">
                            <dt>React核心技术课程</dt>
                            <dd>
                                <span class="studying">正在学习</span> -
                                <strong class="studying-schedule">rudex配合TS使用</strong>
                            </dd>
                        </a>
                    </dl>
                    <a href="#">全部课程</a>
                </div>

            </div>
        </div>
    </div>
    <!-- 热词推荐模块 -->
    <div class="suggest">
        <div class="suggest-info wrapper">
            <h3>精品推荐</h3>
            <ul>
                <li><a href="#">HTML</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">JavaScript</a></li>
                <li><a href="#">Node.js</a></li>
                <li><a href="#">Ajax</a></li>
                <li><a href="#">Vue2.0</a></li>
                <li><a href="#">Vue3.0</a></li>
                <li><a href="#">TypeScript</a></li>
                <li><a href="#">React</a></li>
            </ul>
            <a href="#" class="modify">修改兴趣</a>
        </div>
    </div>
    <!-- 精品推荐区域 -->
    <div class="suggst-detail">
        <div class="suggst-detail-info wrapper">
            <div class="suggest-detail-title">
                <span>精品区域</span>
                <a href="#">查看全部 <img src="./images/more.png" alt=""></a>
            </div>
            <ul class="suggest-detail-list list-card">
                <li>
                    <a href="#">
                        <img src="./uploads/course01.png" alt="">
                        <div class="card-info">
                            <h4>JavaScript数据看板项目实战</h4>
                            <div>
                                <span class="senior_sign">高级</span>
                                <span> · </span>
                                <span>1125人在学习</span>
                            </div>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./uploads/course02.png" alt="">
                        <div class="card-info">
                            <h4>Vue.js实战——面经全端项目</h4>
                            <div>
                                <span class="senior_sign">高级</span>
                                <span> · </span>
                                <span>2726人在学习</span>
                            </div>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./uploads/course03.png" alt="">
                        <div class="card-info">
                            <h4>玩转Vue全家桶，iHRM人力资源项目</h4>
                            <div>
                                <span class="senior_sign">高级</span>
                                <span> · </span>
                                <span>9456人在学习</span>
                            </div>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./uploads/course04.png" alt="">
                        <div class="card-info">
                            <h4>Vue.js实战医疗项目——优医问诊</h4>
                            <div>
                                <span class="senior_sign">高级</span>
                                <span> · </span>
                                <span>7192人在学习</span>
                            </div>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./uploads/course05.png" alt="">
                        <div class="card-info">
                            <h4>小程序实战：小兔鲜电商小程序项目</h4>
                            <div>
                                <span class="senior_sign">高级</span>
                                <span> · </span>
                                <span>2703人在学习</span>
                            </div>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./uploads/course06.png" alt="">
                        <div class="card-info">
                            <h4>前端框架Flutter开发实战</h4>
                            <div>
                                <span class="senior_sign">高级</span>
                                <span> · </span>
                                <span>2841人在学习</span>
                            </div>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./uploads/course07.png" alt="">
                        <div class="card-info">
                            <h4>熟练使用React.js————极客园H5项目</h4>
                            <div>
                                <span class="senior_sign">高级</span>
                                <span> · </span>
                                <span>95682人在学习</span>
                            </div>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./uploads//course08.png" alt="">
                        <div class="card-info">
                            <h4>熟练使用React————极客园PC端项目</h4>
                            <div>
                                <span class="senior_sign">高级</span>
                                <span> · </span>
                                <span>904人在学习</span>
                            </div>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./uploads/course09.png" alt="">
                        <div class="card-info">
                            <h4>前端实用技术，Fetch API 实战项目</h4>
                            <div>
                                <span class="senior_sign">高级</span>
                                <span> · </span>
                                <span>1516人在学习</span>
                            </div>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./uploads/course10.png" alt="">
                        <div class="card-info">
                            <h4>前端高级Node.js零基础入门教程</h4>
                            <div>
                                <span class="senior_sign">高级</span>
                                <span> · </span>
                                <span>2766人在学习</span>
                            </div>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 前端开发工程师区域 -->
    <div class="web subject">
        <div class="subject-info wrapper">
            <div class="subject-title">
                <span>前端开发工程师</span>
                <ul>
                    <li><a class="active" href="#">热门</a></li>
                    <li><a href="#">初级</a></li>
                    <li><a href="#">中级</a></li>
                    <li><a href="#">高级</a></li>
                </ul>
                <a href="#">查看全部 <img src="./images/more.png" alt=""></a>
            </div>
            <div class="subject-card">
                <img class="subject-ads-left" src="./uploads/web_left.png" alt="">
                <div class="subject-card-lesson">
                    <img class="subject-ads-top" src="./uploads/web_top.png" alt="">
                    <ul class="subject-lesson-list list-card">
                        <li>
                            <a href="#">
                                <img src="./uploads//web01.png" alt="">
                                <div class="card-info">
                                    <h4>JS高级JavaScript进阶面向对象ES6</h4>
                                    <div>
                                        <span class="senior_sign">高级</span>
                                        <span> · </span>
                                        <span>101937人在学习</span>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="./uploads//web02.png" alt="">
                                <div class="card-info">
                                    <h4>零基础玩转微信小程序</h4>
                                    <div>
                                        <span class="senior_sign">高级</span>
                                        <span> · </span>
                                        <span>133781人在学习</span>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="./uploads//web03.png" alt="">
                                <div class="card-info">
                                    <h4>JavaScript基础——语法解析+项目实战</h4>
                                    <div>
                                        <span class="senior_sign">高级</span>
                                        <span> · </span>
                                        <span>8927人在学习</span>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="./uploads//web04.png" alt="">
                                <div class="card-info">
                                    <h4>前端框架Vue2+Vue3全套视频</h4>
                                    <div>
                                        <span class="senior_sign">高级</span>
                                        <span> · </span>
                                        <span>26022人在学习</span>
                                    </div>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- Python+大数据开发 -->
    <div class="Python subject">
        <div class="subject-info wrapper">
            <div class="subject-title">
                <span>Python+大数据开发</span>
                <ul>
                    <li><a class="active" href="#">热门</a></li>
                    <li><a href="#">初级</a></li>
                    <li><a href="#">中级</a></li>
                    <li><a href="#">高级</a></li>
                </ul>
                <a href="#">查看全部 <img src="./images/more.png" alt=""></a>
            </div>
            <div class="subject-card">
                <img class="subject-ads-left" src="./uploads/python_left.png" alt="">
                <div class="subject-card-lesson">
                    <img class="subject-ads-top" src="./uploads/python_top.png" alt="">
                    <ul class="subject-lesson-list list-card">
                        <li>
                            <a href="#">
                                <img src="./uploads/python01.png" alt="">
                                <div class="card-info">
                                    <h4>Django视频教程_Django入门</h4>
                                    <div>
                                        <span class="senior_sign">高级</span>
                                        <span> · </span>
                                        <span>9037人在学习</span>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="./uploads/python02.png" alt="">
                                <div class="card-info">
                                    <h4>Python实战项目从0开发一个博客系统</h4>
                                    <div>
                                        <span class="senior_sign">高级</span>
                                        <span> · </span>
                                        <span>88320人在学习</span>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="./uploads/python03.png" alt="">
                                <div class="card-info">
                                    <h4>Python+大数据进阶教程6天掌握实时计算</h4>
                                    <div>
                                        <span class="senior_sign">高级</span>
                                        <span> · </span>
                                        <span>8863人在学习</span>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="./uploads/python04.png" alt="">
                                <div class="card-info">
                                    <h4>数据分析入门教程|300分钟实战项目</h4>
                                    <div>
                                        <span class="senior_sign">高级</span>
                                        <span> · </span>
                                        <span>54093人在学习</span>
                                    </div>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- 人工智能开发 -->
    <div class="AI subject">
        <div class="AI-info wrapper">
            <div class="subject-title">
                <span>人工智能开发</span>
                <ul>
                    <li><a class="active" href="#">热门</a></li>
                    <li><a href="#">初级</a></li>
                    <li><a href="#">中级</a></li>
                    <li><a href="#">高级</a></li>
                </ul>
                <a href="#">查看全部 <img src="./images/more.png" alt=""></a>
            </div>
            <ul class="AI-lesson-list list-card">
                <li>
                    <a href="#">
                        <img src="./uploads/ai01.png" alt="">
                        <div class="card-info">
                            <h4>4天快速入门Python数据挖掘</h4>
                            <div>
                                <span class="senior_sign">高级</span>
                                <span> · </span>
                                <span>83556人在学习</span>
                            </div>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./uploads/ai02.png" alt="">
                        <div class="card-info">
                            <h4>计算机视觉入门及案例实战</h4>
                            <div>
                                <span class="senior_sign">高级</span>
                                <span> · </span>
                                <span>42234人在学习</span>
                            </div>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./uploads/ai03.png" alt="">
                        <div class="card-info">
                            <h4>AI深度学习自然语言处理NLP</h4>
                            <div>
                                <span class="senior_sign">高级</span>
                                <span> · </span>
                                <span>33846人在学习</span>
                            </div>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./uploads/ai05.png" alt="">
                        <div class="card-info">
                            <h4>Python进阶课程-Web基础开发</h4>
                            <div>
                                <span class="senior_sign">高级</span>
                                <span> · </span>
                                <span>61644人在学习</span>
                            </div>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./uploads/ai06.png" alt="">
                        <div class="card-info">
                            <h4>AI-OpenCV图像处理10小时零基础课程</h4>
                            <div>
                                <span class="senior_sign">高级</span>
                                <span> · </span>
                                <span>34922人在学习</span>
                            </div>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!-- JavaEE -->
    <div class="JavaEE subject">
        <div class="JavaEE-info wrapper">
            <div class="subject-title">
                <span>JavaEE</span>
                <ul>
                    <li><a class="active" href="#">热门</a></li>
                    <li><a href="#">初级</a></li>
                    <li><a href="#">中级</a></li>
                    <li><a href="#">高级</a></li>
                </ul>
                <a href="#">查看全部 <img src="./images/more.png" alt=""></a>
            </div>
            <ul class="JavaEE-lesson-list list-card">
                <li>
                    <a href="#">
                        <img src="./uploads/java01.png" alt="">
                        <div class="card-info">
                            <h4>Mybatis注解开发及注释配置</h4>
                            <div>
                                <span class="senior_sign">高级</span>
                                <span> · </span>
                                <span>27925人在学习</span>
                            </div>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./uploads/java02.png" alt="">
                        <div class="card-info">
                            <h4>详细分析LinkedList数据链表实现原理</h4>
                            <div>
                                <span class="senior_sign">高级</span>
                                <span> · </span>
                                <span>25885人在学习</span>
                            </div>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./uploads/java03.png" alt="">
                        <div class="card-info">
                            <h4>全面深入Mysql数据库优化</h4>
                            <div>
                                <span class="senior_sign">高级</span>
                                <span> · </span>
                                <span>94577人在学习</span>
                            </div>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./uploads/java04.png" alt="">
                        <div class="card-info">
                            <h4>全面解剖RocketMQ和项目实现</h4>
                            <div>
                                <span class="senior_sign">高级</span>
                                <span> · </span>
                                <span>47654人在学习</span>
                            </div>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./uploads/java05.png" alt="">
                        <div class="card-info">
                            <h4>三天系统学习ZooKeeper</h4>
                            <div>
                                <span class="senior_sign">高级</span>
                                <span> · </span>
                                <span>110510人在学习</span>
                            </div>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 版权区域 -->
    <div class="copyright">
        <div class="copyright-detail wrapper">
            <div class="copyright-datail-info">
                <img src="./images/logo.png" alt="">
                <p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。<br>&copy; 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p>
                <button>下载APP</button>
            </div>
            <div class="copyright-datail-moreInfo">
                <dl>
                    <dt><h4>关于学成网</h4></dt>
                    <dd><a href="#">关于</a></dd>
                    <dd><a href="#">管理团队</a></dd>
                    <dd><a href="#">工作机会</a></dd>
                    <dd><a href="#">客户服务</a></dd>
                    <dd><a href="#">帮助</a></dd>
                </dl>
                <dl>
                    <dt><h4>新手指南</h4></dt>
                    <dd><a href="#">如何注册</a></dd>
                    <dd><a href="#">如何选课</a></dd>
                    <dd><a href="#">如何拿到毕业证</a></dd>
                    <dd><a href="#">学分是什么</a></dd>
                    <dd><a href="#">考试未通过怎么办</a></dd>
                </dl>
                <dl>
                    <dt><h4>合作伙伴</h4></dt>
                    <dd><a href="#">合作机构</a></dd>
                    <dd><a href="#">合作导师</a></dd>
                </dl>
            </div>
        </div>
    </div>
</body>

</html>